<!DOCTYPE html>
<html lang="en" class="app" xmlns:th="http://www.thymeleaf.org">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

</head>
<body class="">

          <section class="vbox"  id="ajaxContent" th:fragment="video">
            <section class="scrollable padder-lg" >
              <h2 class="font-thin m-b">Video</h2>
              <div class="row row-sm">
                <div class="col-xs-12 col-sm-4" th:each="videoBean:${videoBeanThree}">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
<!--                      <div class="top">-->
<!--                        <span class="badge bg-dark m-l-sm m-t-sm">03:20</span>-->
<!--                      </div>-->
                      <a href="video-detail.html"><img th:src="@{${videoBean.img}}" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])" class="text-ellipsis">[[${videoBean.video_name}]]</a>
                      <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])" class="text-ellipsis text-xs text-muted">[[${videoBean.singerBean.name}]]</a>
                    </div>
                  </div>
                </div>
              </div>
              <h3 class="font-thin m-b" th:if="${videoBeanList} != null">Video List</h3>
              <div class="row row-sm">
                <div class="col-xs-6 col-sm-4 col-md-3" th:each="videoBean:${videoBeanList}">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])"><img th:src="@{${videoBean.img}}" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])" class="text-ellipsis">[[${videoBean.video_name}]]</a>
                      <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])" class="text-ellipsis text-xs text-muted">[[${videoBean.singerBean.name}]]</a>
                    </div>
                  </div>
                </div>

              </div>
<!--              <ul class="pagination pagination">-->
<!--                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>-->
<!--                <li class="active"><a href="#">1</a></li>-->
<!--                <li><a href="#">2</a></li>-->
<!--                <li><a href="#">3</a></li>-->
<!--                <li><a href="#">4</a></li>-->
<!--                <li><a href="#">5</a></li>-->
<!--                <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>-->
<!--              </ul>-->
            </section>
          </section>

  </body>
</html>